<div class="row">
  <div class="col-12 table-responsive">
    <table id="notifications-table" class="table table-responsive-lg table-striped table-bordered margin-bottom-0">
      <thead>
      <tr [ngClass]="{ 'bg-primary text-white': headerColorScheme === NotificationsTableHeaderColorScheme.BLUE }">
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_TITLE)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_TITLE)">
          <button>
            Title
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_TITLE && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_TITLE && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_START_TIME)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_START_TIME)">
          <button>
            Start Time
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_START_TIME && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_START_TIME && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_END_TIME)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_END_TIME)">
          <button>
            End Time
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_END_TIME && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_END_TIME && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_TARGET_USER)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_TARGET_USER)">
          <button>
            Target User
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_TARGET_USER && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_TARGET_USER && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_STYLE)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_STYLE)">
          <button>
            Style
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_STYLE && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_STYLE && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th class="sortable-header" (click)="sortNotificationsTableRowModels(SortBy.NOTIFICATION_CREATE_TIME)" [attr.aria-sort]="getAriaSort(SortBy.NOTIFICATION_CREATE_TIME)">
          <button>
            Creation Time
            <span class="fa-stack" aria-hidden="true">
              <i class="fas fa-sort"></i>
              <i class="fas fa-sort-down" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_CREATE_TIME && notificationsTableRowModelsSortOrder === SortOrder.DESC"></i>
              <i class="fas fa-sort-up" *ngIf="notificationsTableRowModelsSortBy === SortBy.NOTIFICATION_CREATE_TIME && notificationsTableRowModelsSortOrder === SortOrder.ASC"></i>
            </span>
          </button>
        </th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let notificationsTableRowModel of notificationsTableRowModels" [id]="notificationsTableRowModel.notification.notificationId" [ngClass]="{ 'table-success': notificationsTableRowModel.isHighlighted }">
        <td class="text-break">{{ notificationsTableRowModel.notification.title }}</td>
        <td class="text-break"><span class="ngb-tooltip-class" ngbTooltip="{{ notificationsTableRowModel.notification.startTimestamp | formatDateDetail: guessTimezone }}">{{ notificationsTableRowModel.notification.startTimestamp | formatDateBrief: guessTimezone }}</span></td>
        <td class="text-break"><span class="ngb-tooltip-class" ngbTooltip="{{ notificationsTableRowModel.notification.endTimestamp | formatDateDetail: guessTimezone }}">{{ notificationsTableRowModel.notification.endTimestamp | formatDateBrief: guessTimezone }}</span></td>
        <td class="text-break">{{ notificationsTableRowModel.notification.targetUser }}</td>
        <td class="text-break" [ngClass]="notificationsTableRowModel.notification.style | notificationStyleClass">{{ notificationsTableRowModel.notification.style | notificationStyleDescription }}</td>
        <td class="text-break"><span class="ngb-tooltip-class" ngbTooltip="{{ notificationsTableRowModel.notification.createdAt | formatDateDetail: guessTimezone }}">{{ notificationsTableRowModel.notification.createdAt | formatDateBrief: guessTimezone }}</span></td>
        <td class="actions-cell">
          <div class="d-flex">
            <button type="button" class="btn btn-light btn-sm" (click)="loadNotificationEditForm(notificationsTableRowModel.notification)">
              Edit
            </button>
            <button type="button" class="btn btn-danger btn-sm" (click)="deleteNotification(notificationsTableRowModel.notification.notificationId, notificationsTableRowModel.notification.title)">
              Delete
            </button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
